<template>
	<view class="orderInfoPage">
		<u-navbar :autoBack="true" bgColor="#fff">
			<view slot="center">
				订单详情
			</view>
		</u-navbar>

		<view class="address-info" :style="{background:`url(${imgUrl}addressBg.png) no-repeat`}" @tap="goMyaddress">
			<view class="left">
				<view class="top">
					<h2>{{pitchAddress.name}}</h2>
					<span>{{pitchAddress.mobile}}</span>
					<u-icon name="arrow-right" size="16" color="#000"></u-icon>
				</view>
				<view class="btm">
					<u-icon name="map" color="#000" size="13"></u-icon>
					{{pitchAddress.province}}{{pitchAddress.city}}{{pitchAddress.district}}{{pitchAddress.detailedAddress}}
				</view>
			</view>
		</view>

		<view class="goodsInfo">
			<!-- 	<view class="infoTitle">
				{{orderInfo.productTitle}}
			</view> -->
			<view class="shopListBox">
				<view class="shopItem flex_heng" v-for="(items,indexs) in orderInfo.appSonOrderList" :key="indexs">
					<view class="shopLeft flex_heng">
						<image :src="JSON.parse(items.skuSnapshot).pic" mode="" class="shopImg"></image>
						<view class="shopMid flex_shu">
							<view class="shopName u-line-1">
								{{JSON.parse(items.productSnapshot).title}}
							</view>
							<view class="shopSku u-line-2">
								{{JSON.parse(JSON.parse(items.productSnapshot).data1).skuOneName}}:{{JSON.parse(items.skuSnapshot).skuOneValue}}
								/
								{{JSON.parse(JSON.parse(items.productSnapshot).data1).skuTwoName}}:{{JSON.parse(items.skuSnapshot).skuTwoValue}}
							</view>
							<view class="pingjia" @tap="show2Tap(items)" v-if="!items.isComment">去评价</view>
						</view>
					</view>
					<view class="shopRight flex_shu">
						<view class="shopPrice">
							<text>￥</text>{{JSON.parse(items.skuSnapshot).price}}
						</view>
						<view class="shopNum">
							×{{items.num}}
						</view>
					</view>

				</view>
			</view>

			<view class="shopBtm flex_heng">
				<view class="totalText">
					合计
				</view>
				<view class="totalPrice">
					<u--text mode="price" :text="orderInfo.totalPrice" :bold="true" size="36rpx"></u--text>
					<!-- 		<text>￥{{ orderInfo.totalPrice ? orderInfo.totalPrice.toString().split('.')[0] : '0' }}</text>
					<text
						style="font-size:28rpx">.{{ orderInfo.totalPrice && orderInfo.totalPrice.toString().includes('.') ? orderInfo.totalPrice.toString().split('.')[1] : '00' }}</text> -->
				</view>
			</view>
		</view>

		<view class="form-box" v-if="orderInfo.appUserCoupon">
			<view class="title">
				优惠券信息
			</view>
			<view class="item-li">
				<text class="label">优惠券名称</text>
				<view class="right">
					{{orderInfo.appUserCoupon.name}}
				</view>
			</view>
			<view class="item-li">
				<text class="label">优惠金额</text>
				<view class="right">
					<u--text mode="price" :text="orderInfo.discountPrice" color="#FF0000" align="right" size="14"></u--text>
				</view>
			</view>
		</view>

		<view class="form-box">
			<view class="title">
				支付信息
			</view>
			<view class="item-li">
				<text class="label">支付状态</text>
				<view class="yellowText" v-if="orderInfo.status == 1">
					未支付(柜台确认后变更)
				</view>
				<view class="yellowText" v-if="orderInfo.status == 2">
					未支付(柜台确认后变更)
				</view>
				<view class="blueText" v-if="orderInfo.status == 3 || orderInfo.status == 4 ||orderInfo.status == 7">
					已支付
				</view>
			</view>

			<view class="item-li" v-if="orderInfo.status == 3">
				<text class="label">发货状态</text>
				<view class="yellowText">
					未发货
				</view>
			</view>

			<view class="item-li" v-if="orderInfo.status == 4">
				<text class="label">发货状态</text>
				<view class="blueText">
					已发货
				</view>
			</view>

			<view class="item-li" v-if="orderInfo.status == 7">
				<text class="label">发货状态</text>
				<view class="blueText">
					已收货
				</view>
			</view>
			<view class="item-li">
				<text class="label">订单编号</text>
				<view class="right">
					{{orderInfo.id}}
				</view>
			</view>
			<view class="item-li">
				<text class="label">下单时间</text>
				<view class="right">
					{{orderInfo.createTime}}
				</view>
			</view>
			<view class="item-li">
				<text class="label">支付时间</text>
				<view class="right">
					{{orderInfo.payTime?orderInfo.payTime:'--'}}
				</view>
			</view>

			<view class="item-li">
				<text class="label">支付方式</text>
				<view class="right">余额</view>
				<!-- <view class="right" v-if="orderInfo.status == 1">
					暂未支付
				</view> -->
				<!-- 	<view class="right" v-else-if="orderInfo.status == 2">
					暂未支付
				</view>
				<view class="right" v-else>
					{{orderInfo.payType == 1?'现金':orderInfo.payType == 2?'微信':orderInfo.payType == 3?'支付宝':"刷卡"}}
				</view> -->
			</view>


			<view class="item-li">
				<text class="label">应付金额</text>
				<view class="right">
					￥{{orderInfo.totalPrice}}
				</view>
			</view>
			<view class="item-li">
				<text class="label">优惠金额</text>
				<view class="right" v-if="orderInfo.discountPrice">￥{{orderInfo.discountPrice}}
				</view>
			</view>
			<view class="item-li">
				<text class="label">账单合计金额</text>
				<view class="allPrice">
					￥{{orderInfo.copePrice}}
				</view>
			</view>

		</view>

		<view class="footer flex_heng">
			<template v-if="orderInfo.status == 1 || orderInfo.status == 1">
				<view class="footerBtn" @click="cancel(orderInfo.id)">取消订单</view>
			</template>
			<template v-if="orderInfo.status == 3">
				<view class="footerBtn" @tap="show1 = true" style="background: #000">申请退款</view>
			</template>
			<template v-if="orderInfo.status == 4">
				<view class="footerRight" @tap.stop="confirmOrder(item.id)"
					style="background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);">待收货</view>
			</template>
			<template v-if="orderInfo.status == 7">
				<view class="footerBtn" style="background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);">已完成</view>
			</template>
		</view>

		<u-popup :show="show" mode="center" @close="close" @open="open" :round="10" :safeAreaInsetBottom="false">
			<view class="phoneBox flex_shu">
				<view class="phoneTitle">
					退款处理说明！
				</view>
				<view class="phoneText">
					请联系商家退货/退款。
				</view>

				<view class="btnBox flex_heng">
					<view class="closeBtn" @tap="close()">
						取消
					</view>
					<view class="phoneBtn" @tap="callPnone()">
						联系商家
					</view>
				</view>
			</view>
		</u-popup>



		<u-popup v-if="show1" :show="show1" @close="show1 = false" :round="18" mode="center" bgColo="transparent">
			<view class="prop-tip" :style="{ background: `url(${imgUrl + 'prop-bg.png'})` }">
				<image class="prop-title" :src="imgUrl + 'prop-title.png'" mode=""></image>
				<view class="prop-title-top">确认要提交吗？</view>
				<!-- <view class="prop-title-bottom">打卡成功！欢迎来到本营地</view> -->

				<textarea class="prop-title-content" placeholder="填写售后原因"></textarea>

				<view class="prop-title-btns">
					<view class="prop-title-left" @tap="show1 = false">我再想想</view>
					<view class="prop-title-right" :style="{ background: `url(${imgUrl}prop-go.png)` }" @tap="show3 = true">确认提交
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 回复输入框 -->
		<u-popup v-if="show2" :show="show2" closeable :round="20" @close="show2 = false">
			<view class="huifu">
				<view class="huifu-text">订单评价</view>
				<view class="huifu-input">
					<u-textarea placeholder="输入订单评价" v-model="commentMessage"></u-textarea>
				</view>
				<view class="huifu-btn" @tap="comment">发送</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getOrderListDetails,
		cancelOrder,
		getShopInfo,
		comment,
		confirmOrder
	} from '@/api/api.js'
	export default {
		data() {
			return {
				imgUrl: this.$imgUrl,
				show: false,
				show1: false,
				show2: false,
				orderInfo: {},
				// 选中的地址信息
				pitchAddress: {},
				productList: [],
				waterNumber: "", // 订单流水号
				couponPrice: 0,
				orderId: null,
				shopInfo: {},
				commentMessage: '',
				items: {},
			}
		},
		onLoad(op) {
			console.log(op);
			if (op.orderId) {
				this.orderId = op.orderId;
				this.getOrderInfo()
			}
		},
		computed: {
			discountsPrice() {
				let total = 0;
				if (this.productList.length === 0) return 0
				this.productList.forEach(item => {
					total += item.discountsPrice
				})
				return total
			}
		},

		onShareAppMessage(e) {
			console.log(e);
		},
		onShow() {

		},
		computed: {
			payMoney() {
				return this.orderInfo.totalPrice - this.couponPrice
			}
		},

		methods: {

			confirmOrder(id) {
				confirmOrder(id).then(res => {
					if (res.code == 200) {
						uni.$u.toast('确认收货成功');
						this.getOrderInfo()
					}
				})
			},

			// 订单评论
			comment() {
				if (!this.commentMessage) {
					uni.$u.toast('请输入评价内容');
					return
				}
				comment({
					sonOrderId: this.items.id,
					commentMessage: this.commentMessage
				}).then(res => {
					uni.$u.toast('评价成功');
					this.show2 = false;
					this.getOrderInfo()
				});
			},


			show2Tap(items) {
				this.items = items;
				this.show2 = true;
			},


			//订单详情
			getOrderInfo() {
				uni.showLoading()
				getOrderListDetails(this.orderId).then(res => {
					uni.hideLoading()
					console.log('订单详情', res)
					this.pitchAddress = JSON.parse(res.data.addressSnapshot)
					this.orderInfo = res.data;

					console.log(JSON.parse(this.orderInfo.appSonOrderList[0].skuSnapshot));

					this.orderInfo.payType = res.data.appPayRecordList.length > 0 ? appPayRecordList[res.data.appPayRecordList
						.length - 1].payType : ''
					this.orderInfo.appSonOrderList.forEach(item => {
						item.skuSnapshot = JSON.parse(item.skuSnapshot);
						item.productSnapshot = JSON.parse(item.productSnapshot);
					})


					console.log('this.orderInfo.skuSnapshot', this.orderInfo.appSonOrderList)
				})
			},

			//去地址列表
			goMyaddress() {
				uni.navigateTo({
					url: '/package/pages/myAddress/myAddress'
				})
			},

			cancel(id) {
				uni.showLoading()
				cancelOrder(id).then(res => {
					uni.hideLoading()
					if (res.code == 200) {
						uni.$u.toast('订单取消成功');
						this.getList()
					}
				})
			},

			//退款
			godAddy() {
				// getShopInfo(this.orderInfo.shopId).then(res => {
				// 	this.shopInfo = res.data;
				this.show = true;
				// })
			},

			callPnone() {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.phone //仅为示例
				});

			},

			open() {
				this.show = true;
			},
			close() {
				this.show = false;
			},


			//商品详情
			goGoodInfo(item) {
				uni.navigateTo({
					url: `/package/goodsDetail/goodsDetail?id=${item.id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.orderInfoPage {
		width: 100%;
		min-height: 100vh;
		background-color: #F6F6F6;
		padding: 200rpx 28rpx 28rpx;
		box-sizing: border-box;

		.couponBox {
			width: 100%;
			border-radius: 16rpx;
			background: #ffffff;
			margin-top: 28rpx;
			padding: 28rpx;
			box-sizing: border-box;

			.title {
				font-size: 28rpx;
				color: #000000;
				font-weight: 500;
			}
		}

		.address-info {
			background-size: 100% 100% !important;
			padding: 38rpx 20rpx;
			box-sizing: border-box;
			border-radius: 27rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				.top {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: "Alibaba PuHuiTi 2.0";

					h2 {
						color: #000;
						font-size: 32rpx;
						margin: 0 6rpx;
					}

					span {
						color: #000;
						font-size: 32rpx;
					}
				}

				.btm {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					margin-top: 20rpx;
					color: #999;
					font-weight: 400;
					font-family: "Alibaba PuHuiTi 2.0";
				}
			}
		}

		.goodsInfo {
			width: 100%;
			border-radius: 16rpx;
			background: #ffffff;
			margin-top: 28rpx;
			padding: 28rpx;
			box-sizing: border-box;

			.infoTitle {
				color: #000000;
				font-size: 28rpx;
				font-weight: 500;
			}

			.shopListBox {

				.shopItem {
					margin: 28rpx 0 0 0;
					height: 124rpx;

					.shopLeft {
						justify-content: flex-start;

						.shopImg {
							width: 124rpx;
							height: 124rpx;
							border-radius: 16rpx;
						}

						.shopMid {
							margin-left: 16rpx;
							height: 154rpx;
							align-items: flex-start;
							justify-content: flex-start;
							font-family: "Alibaba PuHuiTi 2.0";

							.shopName {
								color: #000000;
								font-size: 28rpx;
								font-weight: 500;
							}

							.shopSku {
								color: #666666;
								font-size: 24rpx;
								font-weight: 400;
								margin-top: 8rpx;
							}
						}
					}

					.shopRight {
						height: 124rpx;
						align-items: flex-end;
						justify-content: space-between;

						.shopPrice {
							color: #000000;
							font-weight: 700;
							font-size: 36rpx;

							text {
								font-size: 28rpx;
							}
						}

						.shopNum {
							color: #666666;
							font-size: 28rpx;
							font-weight: 400;
						}
					}
				}
			}

			.shopBtm {
				margin-top: 28rpx;

				.totalText {
					color: #000000;
					font-size: 24rpx;
					font-weight: 400;
				}

				.totalPrice {
					color: #000000;
					font-size: 36rpx;
					font-weight: 700;
				}
			}
		}

		.form-box {
			width: 100%;
			margin-top: 28rpx;
			padding: 28rpx;
			box-sizing: border-box;
			color: #000000;
			font-family: "Alibaba PuHuiTi 2.0";

			.title {
				font-size: 28rpx;
				color: #000000;
				font-weight: 500;
			}

			.item-li {
				padding: 14rpx 0;

				.label {
					font-size: 28rpx;
					color: #333;
					font-weight: 300;
				}

				.yellowText {
					font-size: 28rpx;
					color: #FF8F1F;
					font-weight: 500;
				}

				.blueText {
					font-size: 28rpx;
					color: #1078F9;
					font-weight: 500;
				}

				.right {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}

				.allPrice {
					color: #ff0303;
					font-size: 38rpx;
					font-weight: 500;
				}
			}
		}

		.footer {
			width: 100%;
			display: flex;
			align-items: center;
			font-family: "Alibaba PuHuiTi 2.0";
			height: 92rpx;
			margin-top: 58rpx;

			.footerLeft {
				width: 316rpx;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 426rpx;
				border: 2rpx solid #000000;
				color: #333333;
				text-align: center;
				font-size: 32rpx;
				font-weight: 500;
				font-family: "Alibaba PuHuiTi 2.0";
			}

			.footerRight {
				width: 316rpx;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 426rpx;
				opacity: 1;
				background: #1078f9;
				text-align: center;
				color: #ffffff;
				font-size: 32rpx;
				font-weight: 500;
				font-family: "Alibaba PuHuiTi 2.0";
				text-align: center;
			}

			.footerBtn {
				width: 694rpx;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 308rpx;
				opacity: 1;
				background: #333333;
				color: #ffffff;
				font-size: 32rpx;
				font-weight: 500;
				font-family: "Alibaba PuHuiTi 2.0";
				text-align: center;
			}

			.footerBtnBlue {
				background: #1078F9;
			}

			.footerBtngreen {
				background: #00B578;
			}
		}

		.pingjia {
			margin-top: 28rpx;
			padding: 0 5rpx;
			height: 42rpx;
			line-height: 42rpx;
			border-radius: 426rpx;
			opacity: 1;
			background: #00B578;
			text-align: center;
			color: #ffffff;
			font-size: 24rpx;
			font-weight: 500;
			font-family: "Alibaba PuHuiTi 2.0";
			text-align: center;
		}

		.phoneBox {
			padding: 34rpx;
			box-sizing: border-box;
			font-family: "Alibaba PuHuiTi 2.0";
			width: 600rpx;

			.phoneTitle {
				color: #000000;
				font-size: 36rpx;
				font-weight: 500;
			}

			.phoneText {
				color: #000000;
				font-size: 24rpx;
				font-weight: 400;
			}

			.btnBox {
				width: 100%;
				height: 76rpx;
				margin-top: 68rpx;

				.closeBtn {
					width: 212rpx;
					height: 76rpx;
					line-height: 76rpx;
					border-radius: 278rpx;
					border: 2rpx solid #666666;
					color: #000000;
					text-align: center;
					font-size: 32rpx;
					font-weight: 500;
				}

				.phoneBtn {
					width: 212rpx;
					height: 76rpx;
					line-height: 76rpx;
					border-radius: 278rpx;
					opacity: 1;
					background: #1078f9;
					color: #fff;
					text-align: center;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}

	}

	.prop-tip {
		width: 694rpx;
		height: 396rpx;
		background-size: 100% 100% !important;
		background-repeat: no-repeat !important;

		border-radius: 36rpx !important;

		position: relative;

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.prop-title {
			position: absolute;
			top: -70rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 128rpx;
			height: 128rpx;
			border-radius: 53.33rpx;
		}

		.prop-title-top {
			width: 100%;
			color: #000000;
			text-align: center;
			font-size: 40rpx;
			font-weight: 500;
			font-family: 'Alibaba PuHuiTi M';
			margin-bottom: 30rpx;
		}

		.prop-title-content {
			width: 319px;
			height: 89px;
			border-radius: 8px;
			opacity: 1;
			background: #f6f6f6;
			padding: 14rpx;
			box-sizing: border-box;
		}

		.prop-title-bottom {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			color: #666666;
			text-align: center;
			font-size: 32rpx;
			font-weight: 400;
			font-family: 'Alibaba PuHuiTi R';
		}

		.prop-title-btns {
			position: absolute;
			bottom: -120rpx;
			left: 50%;
			transform: translateX(-45%);
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.prop-title-left {
				margin-top: -40rpx;
				width: 242rpx;
				height: 84rpx;
				border-radius: 828rpx;
				opacity: 1;
				border: 2rpx solid #999999;
				color: #333333;
				text-align: center;
				line-height: 84rpx;
				font-size: 28rpx;
				font-weight: 500;
				font-family: 'Alibaba PuHuiTi M';
				letter-spacing: 0.42rpx;
			}

			.prop-title-right {
				padding-bottom: 38rpx;
				width: 362rpx;
				height: 204rpx;
				border-radius: 828rpx;
				// border: 2rpx solid #999999;
				color: #333333;
				text-align: center;
				line-height: 204rpx;
				font-size: 28rpx;
				font-weight: 500;
				font-family: 'Alibaba PuHuiTi M';
				// letter-spacing: 0.42rpx;
				background-repeat: no-repeat !important;
				background-size: 100% 100% !important;
			}
		}
	}

	.huifu {
		width: 100%;
		box-sizing: border-box;
		padding: 0 28rpx 40rpx 28rpx;

		.huifu-text {
			width: 100%;
			height: 88rpx;
			color: #000000;
			text-align: left;
			line-height: 88rpx;
			font-size: 32rpx;
			font-weight: 500;
			font-family: 'Alibaba PuHuiTi M';
		}

		.huifu-input {
			// margin-top: 28rpx;
		}

		.huifu-btn {
			margin-top: 28rpx;
			width: 100%;
			height: 80rpx;
			border-radius: 32rpx;
			opacity: 1;
			border: 2rpx solid #999999;
			color: #000000;
			text-align: center;
			line-height: 80rpx;
			font-size: 32rpx;
			font-weight: 500;
			font-family: 'Alibaba PuHuiTi M';
			background: linear-gradient(-49.9deg, #00bf39 0%, #34dfa3 100%);
		}
	}
</style>